<template >
    <!-- 导航选项 -->
    <div class="overflow-scroll" style="background-color: var(--boxborder);">
        <div>
            <p class="leading-[4rem] h-16" v-show="choice == 0">找到{{ musicData.data.value?.data?.length }}首单曲</p>
            <p class="leading-[4rem] h-16" v-show="choice == 1">找到{{ singerData.data.value?.data?.length }}位歌手</p>
            <p class="leading-[4rem] h-16" v-show="choice == 2">找到{{ albumData.data.value?.data?.length }}张专辑</p>
            <p class="leading-[4rem] h-16" v-show="choice == 3">找到{{ musicListData.data.value?.data?.length }}个歌单</p>
        </div>
        <div class="flex w-full h-10 border-t-2 border-b-[1px] border-gray-500">
            <div class="w-20 leading-10 text-center" v-for="item, index in choiceList"
                :class="`${index == choice ? 'bg-gray-300' : 0}`">
                <p @click="choice = index">{{ item.title }}</p>
            </div>
        </div>
        <!-- 展示单曲列表 -->
        <div v-if="!musicData.pending.value && choice == 0 && musicData.data.value?.data?.length !== 0">
            <div class="w-full flex text-gray-500 text-sm h-8 mt-2 border-b-[1px] border-gray-300">
                <p class="w-[33%]">歌曲</p>
                <p class="w-[31%]">专辑</p>
                <p class="w-[30%]">歌手</p>
                <p class="w-[4%]">时长</p>
            </div>
            <div class="w-full">
                <div v-for="item, index in musicData.data.value?.data" class="text-gray-600 text-sm">
                    <PublicMusicItem :singer="item.singer" :name="item.name" :album="item.album" :time="item.time"
                        :index="index" :id="item._id" class="w-full px-2 rounded-md " @click="pushitem(index)" />
                </div>
            </div>
        </div>
        <div v-if="!musicData.pending.value && choice == 0 && musicData.data.value?.data?.length == 0">
            <p class="text-center leading-[4rem]">暂无数据,目前仅支持全字匹配</p>
        </div>
        <!-- 展示歌手列表 -->
        <div class="w-full" v-if="!singerData.pending.value && choice == 1 && singerData.data.value?.data?.length !== 0">
            <div class="flex flex-wrap mt-10">
                <div v-for="item in singerData.data.value?.data" class="px-6"
                    @click="router.push(`/singerDetail/${item._id}`)">
                    <div class="w-32 text-center">
                        <img :src="item.cover" alt="封面" class="w-32 h-32 rounded-md">
                        <p class="leading-10">{{ item.name }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="!singerData.pending.value && choice == 1 && singerData.data.value?.data?.length == 0">
            <p class="text-center leading-[4rem]">暂无数据,目前仅支持全字匹配</p>
        </div>
        <!-- 展示专辑列表 -->
        <div class="w-full" v-if="!albumData.pending.value && choice == 2">
            <div class="flex flex-wrap p-8">
                <div v-for="item in albumData.data.value?.data" class="flex w-48 flex-wrap text-center mx-2"
                    @click="router.push(`/album/${item._id}`)">
                    <ShowCover :boxsize="48" :iconsize="'3rem'" :data="item.cover" />
                    <div class="w-full leading-10">
                        <p class="textoverflow" :title="item.title">{{ item.title }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="!albumData.pending.value && choice == 2 && albumData.data.value?.data?.length == 0">
            <p class="text-center leading-[4rem]">暂无数据,目前仅支持全字匹配</p>
        </div>
        <!-- 展示歌单列表 -->
        <div class="w-full" v-if="!musicListData.pending.value && choice == 3">
            <div class="w-full flex flex-wrap mt-6">
                <div v-for="item in musicListData.data.value?.data" class="mx-3"
                    @click="router.push(`/musicListDetail/${item._id}`)">
                    <HomeMusicListCard :_id="item._id" :cover="item.cover" :title="item.name" />
                </div>
            </div>
        </div>
        <div v-if="!musicListData.pending.value && choice == 3 && musicListData.data.value?.data?.length == 0">
            <p class="text-center leading-[4rem]">暂无数据,目前仅支持全字匹配</p>
        </div>


    </div>
</template>
<script setup lang="ts">
import { watch } from 'vue'
import { ResultBase } from '~~/types/interface';
import { usePlayStore } from '~~/store';
const store = usePlayStore();
const router = useRouter()
const choiceList = [
    { title: "单曲", value: "music" },
    { title: "歌手", value: "singer" },
    { title: "专辑", value: "album" },
    { title: "歌单", value: "musicList" },
]
const choice = ref(0)
interface music {
    _id: string,
    name: string,
    singer: {
        id: number,
        name: string,
    }[],
    lyricsId: string,
    album: {
        id: string,
        name: string,
        picUrl: string,
    },
    time: string,
    link: string
}
interface album {
    _id: string,
    title: string,
    singer: {
        id: number,
        name: string,
    }[],
    cover: string,
}
interface musicList {
    _id: string,
    name: string,
    cover: string,
    auther: string,
}
interface singer {
    _id: string,
    name: string,
    cover: string,
}
const musicData = await useAsyncData<ResultBase<music>>('music', () => $fetch(`/api/search/music?title=${store.keywords}`));
const singerData = await useAsyncData<ResultBase<singer>>('singer', () => $fetch(`/api/search/singer?title=${store.keywords}`))
const albumData = await useAsyncData<ResultBase<album>>('singer', () => $fetch(`/api/search/album?title=${store.keywords}`))
const musicListData = await useAsyncData<ResultBase<musicList>>('singer', () => $fetch(`/api/search/musicList?title=${store.keywords}`))
watch(() => store.keywords, async () => {
    if (choice.value == 0) {
        musicData.refresh()
    }
    else if (choice.value == 1) {
        singerData.refresh()
    }
    else if (choice.value == 2) {
        albumData.refresh()
    }
    else if (choice.value == 3) {
        musicListData.refresh()
    }
})
watch(choice, (newvalue, oldvalue) => {
    if (newvalue != oldvalue) {
        if (newvalue == 0) {
            musicData.refresh();
        } else if (newvalue == 1) {
            singerData.refresh();
        } else if (newvalue == 2) {
            albumData.refresh();
        } else if (newvalue == 3) {
            musicListData.refresh()
        }
    }
})
const pushitem = function (item: number) {
    if (musicData.data.value?.data) {
        let tempdata = {
            cover: musicData.data.value?.data[item].album.picUrl,
            name: musicData.data.value?.data[item].name,
            id: Number(musicData.data.value?.data[item]._id),
            singer: musicData.data.value?.data[item].name,
            dt: Number(musicData.data.value?.data[item].time),
            album: musicData.data.value?.data[item].album.name,
        }
        store.pushMusic(tempdata);
        if (store.playList.length == 1) {
            store.$patch(() => {
                store.currentId = store.playList[0].id;
                store.playStatus = true;
            })
        }
    }
}
</script>
<style lang="less"></style>